<template>
  <div class="tabList">
    <slot name="search"></slot>
    <div class="top-option">
      <el-button
        type="primary"
        v-if="option.addBtn"
        :size="option.btnSize"
        :icon="option.addBtnIcon"
        @click="onEvent(null, 'add')"
        >{{ option.addBtnText }}
      </el-button>
      <el-button
        type="danger"
        v-if="option.selection"
        :size="option.btnSize"
        :icon="option.batchDelBtnIcon"
        @click="batchDelete"
        >{{ option.batchDelBtnText }}
      </el-button>
      <!-- 自定义按钮 -->
      <slot name="menuLeft"></slot>
    </div>
    <!-- 全选操作 -->
    <div>
      <el-tag class="selectedInfo">
        <div class="selectDetails" v-if="option.selection">
          已选择 {{ selectedRecord }} 个
        </div>
        <div class="empty" v-if="option.selection" @click="emptyEvent">
          清空
        </div>
        <div class="refresh">
          <span
            class="el-icon-refresh-left icon"
            @click="refreshList(page)"
          ></span>
        </div>
      </el-tag>
    </div>
    <el-table
      ref="table"
      :data="data"
      v-loading="tableLoading"
      style="width: 100%"
      @selection-change="selectionChange"
    >
      <!-- 多选 -->
      <el-table-column
        type="selection"
        width="50"
        v-if="option.selection === false ? false : true"
      >
      </el-table-column>
      <!-- 序号 -->
      <el-table-column
        type="index"
        label="#"
        width="50"
        v-if="option.index"
      ></el-table-column>
      <el-table-column
        v-for="item in option.column"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :show-overflow-tooltip="true"
      >
        <template slot="header" slot-scope="{ column }">
          <slot :name="item.prop + 'Header'" :column="column">
            {{ column.label }}
          </slot>
        </template>
        <template slot-scope="scope">
          <slot :name="item.prop" :row="scope.row">
            {{ scope.row[item.prop] }}
          </slot>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        label="操作"
        v-if="option.operation === false ? false : true"
        :width="option.operationWidth || '180px'"
      >
        <template slot-scope="scope">
          <el-button
            v-if="option.viewBtn"
            :size="option.btnSize"
            :icon="option.viewBtnIcon"
            type="text"
            @click="onEvent(scope.row, 'view')"
            >{{ option.viewBtnText }}</el-button
          >
          <el-button
            v-if="option.editBtn"
            :size="option.btnSize"
            :icon="option.editBtnIcon"
            type="text"
            @click="onEvent(scope.row, 'edit')"
            >{{ option.editBtnText }}</el-button
          >
          <el-button
            v-if="option.delBtn"
            :icon="option.delBtnIcon"
            :size="option.btnSize"
            type="text"
            @click="onEvent(scope.row, 'del')"
            >{{ option.delBtnText }}</el-button
          >
          <!-- 自定义操作栏 -->
          <slot name="menu" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 自定义分页 -->
    <template v-if="option.pagination === false ? false : true">
      <Pagination
        :tablePage="tablePage"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </template>
  </div>
</template>

<script>
import Pagination from "./components/pagination.vue";

export default {
  name: "ComTable",
  components: { Pagination },
  props: {
    tableLoading: {
      type: Boolean,
      required: true,
      default: () => true,
    },
    option: {
      type: Object,
      required: true,
      default: () => {},
    },
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    page: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tablePage: {
        pageSize: 10,
        currentPage: 1,
        pageSizes: [10, 20, 30, 50],
        total: 0,
      },
      selectedRecord: 0, // 统计全选数量
      selectionList: [], // 全选参数
    };
  },
  watch: {
    page: {
      handler: function (newVal) {
        this.tablePage = Object.assign(this.tablePage, newVal);
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.refreshList();
  },
  mounted() {},
  methods: {
    //   setValue(e) {
    //     Object.keys(e).forEach((key) => {
    //       this.option[key] = e[key];
    //     });
    //   },
    /** 操作 */
    onEvent(row, type) {
      if (type == "del") {
        this.$confirm("确定将选择数据删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$emit("on-event", row, type);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
        return;
      }
      this.$emit("on-event", row, type);
    },
    //   /** 删除请求开始(1：表格单条数据删除时显示状态；2：表格批量数据删除时显示状态) */
    //   startDelRequest(e, newName) {
    //     this.tabLoading = true;
    //     if (e === 1) {
    //       this.confirmBtnAttr.confirmText = newName;
    //       this.confirmBtnAttr.loading = true;
    //     } else if (e === 2) {
    //       this.batchBtnAttr.batchDelText = "批 量 删 除 中...";
    //       this.batchBtnAttr.showLoading = true;
    //     }
    //   },
    //   /** 删除请求开始(1：表格单条数据删除结束后显示状态；2：表格批量数据删除结束后显示状态) */
    //   endDelRequest(e) {
    //     this.tabLoading = false;
    //     if (e === 1) {
    //       Object.assign(
    //         this.$data.confirmBtnAttr,
    //         this.$options.data().confirmBtnAttr
    //       );
    //     } else if (e === 2) {
    //       Object.assign(
    //         this.$data.batchBtnAttr,
    //         this.$options.data().batchBtnAttr
    //       );
    //     }
    //   },
    /** 多选操作 */
    selectionChange(e) {
      this.selectedRecord = e.length;
      this.selectionList = e;
      this.$emit("selection-change", e);
    },

    /** 清空选中的数据 */
    emptyEvent() {
      this.selectedRecord = 0;
      this.$refs["table"].clearSelection();
    },

    /** 批量删除 */
    batchDelete() {
      if (this.selectedRecord != 0) {
        this.$emit("batch-delete", this.selectionList);
      } else {
        this.$message({
          message: "请至少选择一条数据!!",
          type: "warning",
        });
      }
    },

    /** 每页显示条数 */
    sizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.refreshList();
      this.$emit("size-change", pageSize);
    },
    /** 当前的页数 */
    currentChange(currentPage) {
      this.tablePage.currentPage = currentPage;
      this.refreshList();
      this.$emit("current-change", currentPage);
    },
    /** 刷新表格数据 */
    refreshList() {
      this.$emit("on-load", this.tablePage);
    },
  },
};
</script>

<style scoped lang="less">
.tabList {
  width: 100%;
  height: 100%;

  .top-option {
    margin: 20px 0;
  }

  .selectedInfo {
    width: 100%;
    height: 40px;
    border-radius: 0;
    margin-bottom: 15px;
    display: flex;
    position: relative;

    .selectDetails {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 15px;
      letter-spacing: 1px;
    }

    .empty {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #ff0000;
      letter-spacing: 1px;
      cursor: pointer;
      margin-left: 20px;
      font-weight: bolder;
    }

    .refresh {
      width: auto;
      height: 100%;
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;

      .icon {
        font-size: 25px;
        cursor: pointer;
      }
    }
  }
}
</style>
